<!DOCTYPE html>
<html>
<head>
	<meta charset="UTF-8">
    <title>修改空气质量信息</title>
    <link rel="stylesheet" href="static/css/layui.css">
</head>
<body>

<!-- 下拉列表的表单 -->
<form class="layui-form" lay-filter="editAir" action="">
  <div class="layui-form-item">
    <div class="layui-form-item">
        <label class="layui-form-label">检测区域</label>
        <div class="layui-input-block">
            <select name="districtId" id="district">
            </select>
        </div>
    </div>
  </div>
<div class="layui-form-item">
    <label class="layui-form-label">检测时间</label>
    <div class="layui-input-block">
      <input type="text" name="monitorTime" id="monitorTime" autocomplete="off" placeholder="请输入检测时间" class="layui-input">
    </div>
  </div>
<div class="layui-form-item">
    <label class="layui-form-label">pm10</label>
    <div class="layui-input-block">
      <input type="number" name="pm10" id="pm10" autocomplete="off" placeholder="请输入pm10" class="layui-input">
    </div>
  </div>
  <div class="layui-form-item">
    <label class="layui-form-label">pm2.5</label>
    <div class="layui-input-block">
      <input type="number" name="pm25" id="pm25" autocomplete="off" placeholder="请输入pm25" class="layui-input">
    </div>
  </div>
  <div class="layui-form-item">
    <label class="layui-form-label">检测站</label>
    <div class="layui-input-block">
      <input type="text" name="monitoringStation" id="monitoringStation" autocomplete="off" placeholder="请输入检测站" class="layui-input">
    </div>
  </div>
  <div class="layui-form-item">
    <label class="layui-form-label">最后修改时间</label>
    <div class="layui-input-block">
      <input type="text" name="lastModifyTime" readonly id="lastModifyTime" autocomplete="off" class="layui-input">
        <input type="hidden" name="id" />
    </div>
  </div>
  <div class="layui-form-item">
    <div class="layui-input-block">
	    <button type="submit" class="layui-btn" lay-submit="" lay-filter="airEdit">更新</button>
	    <button type="button" id="closeBtn" class="layui-btn layui-btn-primary">关闭</button>
     </div>
   </div>
</form>
<script src="static/layui.js"></script>
<script>
    layui.use(['form','laydate'], function () {
        var $ = layui.$,
            form = layui.form,
            laydate = layui.laydate;

        // 将检测时间初始化为选择时间的组件
        laydate.render({
            elem: '#monitorTime' //指定元素
        });

        var air = layui.sessionData('air').air;//拿到数据

        layui.sessionData('air',{//销毁存储
            key:'air',
            remove:true
        });

        //给表单赋值
        form.val("editAir",air);

        // 发送ajax请求获取区域数据，填充到district下拉列表
        $.ajax({
            url: "http://localhost:8080/district/findAll",
            data: null,
            type: "GET",
            dataType: "json",
            success: function (res) {
                if (res.code == 0) {
                    var jsonArray = res.data;
                    var content = "<option value='0'>请选择区域</option>";
                    for (var i = 0; i < jsonArray.length; i++) {
                        if(jsonArray[i].name == air.districtName){
                            content += "<option selected value='" + jsonArray[i].id + "'>" + jsonArray[i].name + "</option>";
                        }else{
                            content += "<option value='" + jsonArray[i].id + "'>" + jsonArray[i].name + "</option>";
                        }
                    }
                    // 插入到下拉列表的标签体内
                    $("#district").html(content);
                    // 重新渲染form
                    form.render('select');
                } else {
                    // 凉凉~~
                    layer.msg(res.msg);
                }
            },
            error: function () {
                layer.msg("凉凉~~");
            }
        });

        //发送ajax请求修改当前行数据
        form.on('submit(airEdit)',function(data){
            var parameters = data.field;
            console.log(parameters);
            $.ajax({
                url:"http://localhost:8080/air/update",
                data:parameters,
                type:"POST",
                dataType:"json",
                success:function(res){
                    if(res.code == 0){
                        layer.msg("修改成功！");
                        layui.sessionData('airEdit',{
                            key:'airEdit',
                            value:parameters
                        });
                        setTimeout(function(){
                            var index = parent.layer.getFrameIndex(window.name);
                            parent.layer.close(index); //再执行关闭
                        },1000);
                    }else{
                        layer.msg(res.msg);
                    }
                },
                error:function(){
                    layer.msg("凉凉~~");
                }
            });
            return false;//阻止表单跳转。如果需要表单跳转，去掉这段即可。
        });


        // 给关闭按钮绑定单击事件
        $("#closeBtn").click(function(){
            var index = parent.layer.getFrameIndex(window.name);
            parent.layer.close(index); //再执行关闭
        });
    });

</script>
</body>
</html>